<el-dialog 
    top="16px"
    class="mk-plugin-details" 
    width="90%" 
    :visible.sync="previewDialog">
    <div class="mk-details-title">
        <el-image :src="preview.cover" class="mk-details-icon">
            <div slot="error" class="image-slot">
                <img class="error-image" :src="static + '/images/error.png'"/>
            </div>
        </el-image>
        {{preview.title}}
    </div>
    <div class="mk-details-tabs mk-card-tabs">
        <el-tabs type="card">
            <el-tab-pane label="插件概览">
                <div class="mk-plugin-overview" v-loading="detailsLoading">
                    <p>当前版本：{{preview.now_version_number}}</p>
                    <p>最新版本：{{preview.new_version_number}}</p>
                    <p>最近更新：{{preview.update_time}}</p>
                    <p>插件作者：{{preview.user_nickname}}</p>
                    <p>安装次数：{{preview.download}}</p>
                    <p>综合评级：
                        <el-rate
                            v-model="preview.rate"
                            disabled
                            show-score
                            text-color="#ff9900">
                        </el-rate>
                    </p>
                    <p>简短描述：{{preview.describe}}</p>
                </div>
            </el-tab-pane>
            <el-tab-pane label="图文描述" v-loading="detailsLoading">
                <div class="mk-plugin-content">
                    <div v-html="preview.content"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="版本修订" v-loading="detailsLoading">
                <el-timeline>
                    <el-timeline v-for="(item, index) in preview.version_list">
                        <el-timeline-item :timestamp="item.version" placement="top">
                        <el-card>
                            <div v-html="item.content"></div>
                            <p>版本提交于 · {{item.create_time}}</p>
                        </el-card>
                    </el-timeline-item>
                </el-timeline>
            </el-tab-pane>
            <el-tab-pane label="用户评价">
                <el-table
                    :data="commentList"
                    v-loading="commentLoading">
                    <el-table-column label="用户评价">
                        <template slot-scope="props">
                            <div class="mk-plugin-assess">
                                <img class="mk-portrait" :src="api + props.row.user_avatar" />
                                <span>{{props.row.user_nickname}}</span>
                                <span class="mk-point">·</span>
                                <span>{{props.row.create_time}}</span>
                                <p>
                                    <el-rate
                                        v-model="props.row.rate"
                                        disabled
                                        show-score
                                        text-color="#ff9900">
                                    </el-rate>
                                </p>
                                <p>{{props.row.content}}</p>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    @current-change="commentPageChange"
                    :current-page="commentSearch.page"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="commentPageTotal"
                    hide-on-single-page>
                </el-pagination>
            </el-tab-pane>
        </el-tabs>
    </div>
    <span slot="footer" class="dialog-footer">
        <el-button 
            type="primary" 
            icon="el-icon-refresh-right"
            @click="pluginUpdate(preview)"
            v-if="preview.now_version_number !== '未安装'"
            :disabled="preview.now_version_number === preview.new_version_number || detailsLoading"
            :loading="preview.updateLoading">
            {{detailsLoading === true ? '检测更新中...' : preview.now_version_number === preview.new_version_number ? '已安装最新版本' : '一键更新'}}
        </el-button>
        <el-button 
            type="primary" 
            icon="el-icon-refresh-right"
            @click="pluginInstall(preview)"
            v-if="preview.now_version_number === '未安装'"
            :loading="preview.installLoading">
            一键安装
        </el-button>
    </span>
</el-dialog>